<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div class="wrap">
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/30.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/31.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/32.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/33.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/34.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/35.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/36.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/37.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/38.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/39.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/40.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
     <div class="face">
	<div class="box" >
	   <div class="mask">正面背景</div>
	      <img src='http://www.zxhuan.com/wp-content/uploads/2016/02/41.jpg'>
	   </div>
          <div class='box-mask'>
              <p>背面背景</p>
          </div>
     </div>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src='index.js'></script>
</body>
</html>